<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .wrap{
            padding: 8px;
        }
        .wrap button{
            width: 45px;
            height: 30px;
        }
        .wrap button~button{
            margin-left: 10px;
        }
        .slideBar{
            width: 1100px;
            height: 100px;
            margin-top: 10px;
            border: 1px solid #333;
            border-top: 0;
            position: relative;
        }
        .ball{
            width: 100px;
            height: 100px;
            background-color: #6ff;
            position: absolute;
            left:0px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="buttonGroup">
            <button class="start">开始</button>
            <button class="pause">暂停</button>
            <button class="back">返回</button>
        </div>
        <div class="slideBar">
            <div class="ball"></div>
        </div>
    </div>
    <div class="wrap">
        <div class="buttonGroup">
            <button class="start">开始</button>
            <button class="pause">暂停</button>
            <button class="back">返回</button>
        </div>
        <div class="slideBar">
            <div class="ball"></div>
        </div>
    </div>
    <div class="wrap">
        <div class="buttonGroup">
            <button class="start">开始</button>
            <button class="pause">暂停</button>
            <button class="back">返回</button>
        </div>
        <div class="slideBar">
            <div class="ball"></div>
        </div>
    </div>
</body>
<script>
    // JS运动  每隔固定时间改变元素的位置(宽度/高度 )
    // (1)  计时器 / 延时器
    // (2)  改变元素的位置   => margin position translate

    var startList = document.getElementsByClassName("start");
    var pauseList = document.getElementsByClassName("pause");
    var backList = document.getElementsByClassName("back");
    var ballList = document.getElementsByClassName("ball");

    document.onclick = function(e){
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if(target.className == "start"){
            console.log(target);
            var index = [...startList].indexOf(target);
            var ball = ballList[index];
            animate(ball,"left",1000,"linear");

        }else if(target.className == "pause"){
            clearInterval(timer);
        }else if(target.className == "back"){
            console.log(target);
            var index = [...backList].indexOf(target);
            var ball = ballList[index];
            animate(ball,"left",0,"linear");
        }
    }





    var timer = null;

    // ele  运动的元素
    // attr 运动的css属性("left" top width height opacity)
    // end  运动的终点值 
    function animate(ele,attr,end,aniType="linear"){
        //  1. 记录盒子的起始位置   2. 记录每次运动之后盒子的位置
        // var cur = ele.offsetLeft;    // 快捷取值
        var cur = parseFloat(getStyle(ele,attr));  //传统的获取非行内样式
        end = parseFloat(end);       // 设置运动的终点值 (可以去单位)

        if(attr === "opacity"){  //opacity (0-1) =>  原值扩大1000倍(0-1000)
            cur *= 1000;
            end *= 1000;
        }
        
        var speed = 0;  // 1. 没有运动之前初始速度   2. 记录每次运动的速度
        
        clearInterval(timer);         // 每次启动下一个之前 清除上一个

        // 元素节点的本质 => 对象 => 给对象赋一个不存在的属性名  => 新增该属性到对象中
        timer = setInterval(function(){
        
            if(aniType == "linear"){  //匀速
               
                speed = end >= cur ? 20 : -20 ;   // 每隔10ms运动的距离  (匀速)
            }else if(aniType == "ease-in"){ // 加速
                speed  = end >= cur ? speed + 2 : speed - 2;
            }else if(aniType == "ease-out"){ //缓冲
                // speed = (end - cur) / 10;
                // speed = end >= cur ? Math.ceil(speed) : Math.floor(speed);
                speed = Math.ceil(Math.abs(end - cur) / 10);  //取绝对值 => 向上取值
                speed = end >= cur ? speed : - speed;
            }

            
            console.log(speed);

            cur += speed;
            // console.log(cur);

            if(attr==="opacity"){
                ele.style[attr] = cur/1000;
            }else{
                ele.style[attr] = cur + "px";
            }

            // 问题: 理想情况下 cur == end,但是如果需要运动的距离(终点值 - 起点值) 不是速度的整数倍  => 不会停止
            // 解决方法:   
            // (1)  cur >= end
            // (2)  Math.abs(end - cur) <= Math.abs(speed)
            // 新的问题  => 超出几像素  => 强制到达终点

            // 临界值判断
            if(Math.abs(end - cur) <= Math.abs(speed)){
                clearInterval(timer);

                if(attr==="opacity"){
                    ele.style[attr] = end/1000;
                }else{
                    ele.style[attr] = end + "px";
                }
              
            }

        },100)

      
    }

    function getStyle(ele,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(ele)[attr];
        }else{
            return ele.currentStyle[attr];
        }
    }

</script>
</html>